<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="小兔鲜儿,致力打造全球最大的食品、生鲜电商购物平台">
    <!-- meta:kw -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <link rel="stylesheet" href="../css/login.css">
    <!-- <link rel="stylesheet" href="../css/common.css"> -->
    <!-- <link rel="stylesheet" href="../css/public.css"> -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- <link rel="stylesheet" href="../css/index.css"> -->
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../lib-master/theme-chalk/index.css">

    <!-- <link rel="stylesheet" href="./iconfont/iconfont.css"> -->
</head>

<body>
    <!-- 登录页面的头部 -->
    <div class="login-header">
        <div class="container">
            <!-- <div class="login-left"> -->
            <h1 class="login"><a href="../index.html">小兔鲜</a></h1>
            <h3>欢迎登录</h3>
            <!-- </div> -->
            <a href="../index.html" class="login-right">进入网站首页
                <i class="iconfont icon-arrow-right"></i>
                <i class="iconfont icon-arrow-right"></i></a>
        </div>
    </div>
    <!-- 登录页面的内容 -->
    <div class="login-main">
        <div class="content">
            <nav>
                <a href="#" class="active" data-index="0">账户登录</a>
                <a href="#" data-index="1">扫码登录</a>
            </nav>
            <div class="messageBox">
                <div class="toggle">
                    <a data-id="0">
                        <i class="iconfont icon-youjian"></i>
                        使用短信登录
                    </a>
                    <a data-id="1" style="display: none;">
                        <!-- <i class="el-icon-user"></i> -->
                        <i class="iconfont icon-yonghu"></i>
                        使用账户登录
                    </a>
                </div>
                <!-- <form action=""> -->
                <form action="" class="loginForm">
                    <section class="message">
                        <div class="formItem">
                            <i class="el-icon-user-solid"></i>
                            <!-- <i class="iconfont icon-yonghu" id="userIcon"></i> -->
                            <input type="text" placeholder="请输入用户名" name="username">
                            <span class="msg2"></span>
                        </div>
                        <div class="formItem">
                            <i class="iconfont icon-yincang1"></i>
                            <input type="password" placeholder="请输入密码" name="password">
                            <span class="msg4"></span>
                        </div>
                        <div class="agreebox">
                            <!-- <input type="checkbox" id="checkbox"> -->
                            <!-- <i class="el-icon-circle-check" ></i> -->
                            <span class="iconfont icon-chenggong"></span>
                            <span class="agree">我已同意<a href="#">《隐私条款》</a>和<a href="#">《服务条款》</a></span>
                            <p class="msg3"></p>
                        </div>
                        <button class="btn">登录</button>
                        <!-- <a href="" class="btn">登录</a> -->
                        <!-- </form> -->
                    </section>
                    <section class="message" style="display: none;">
                        <div class="formItem">
                            <i class="iconfont icon-shouji"></i>
                            <input type="text" placeholder="请输入手机号" name="phone">
                            <span class="msg1"></span>
                        </div>
                        <div class="formItem">
                            <i class="iconfont icon-anquanbaozhang-xianxing"></i>
                            <input type="text" placeholder="请输入验证码" name="confirm">
                            <span class="code">发送验证码</span>
                        </div>
                        <div class="agreebox">
                            <!-- <input type="checkbox" id="checkbox"> -->
                            <!-- <i class="el-icon-circle-check"></i> -->
                            <span class="iconfont icon-chenggong"></span>
                            <span class="agree">我已同意<a href="#">《隐私条款》</a>和<a href="#">《服务条款》</a></span>
                            <p class="msg3"></p>
                        </div>
                        <button class="btn">登录</button>
                        <!-- <a href="" class="btn">登录</a> -->
                        <!-- </form> -->
                    </section>
                </form>


                <div class="messageBottom">
                    <a href="#" class="qqImg">
                        <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
                    </a>
                    <div class="forget">
                        <a href="#">忘记密码 <i class="el-icon-question"></i></a>
                        <a href="./register.html">点击注册</a>
                    </div>
                </div>
            </div>
            <div class="messageBox" style="display: none;">
                <img src="http://erabbit.itheima.net/img/qrcode.5372a064.jpg" alt="" class="codeimg">
                <p class="open">打开<a href="#" class="app">小兔鲜App</a>扫码登录</p>
            </div>

            <!-- </div> -->

        </div>
        <div class="unfind" style="display: none;"><i class="el-icon-warning-outline"></i> 用户名不存在</div>
    </div>
    <!-- 登录页面的底部 -->
    <div class="loginFooter">
        <!-- 版权信息 -->
        <div class="copyright">
            <p>
                <a href="javascript:;" id="us">关于我们</a>
                <a href="javascript:;">帮助中心</a>
                <a href="javascript:;">售后服务</a>
                <a href="javascript:;">配送与验收</a>
                <a href="javascript:;">商务合作</a>
                <a href="javascript:;">搜索推荐</a>
                <a href="javascript:;">友情链接</a>
            </p>
            <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
    </div>

</body>
<script src="../js/login.js"></script>
<script src="../lib-master/index.js"></script>


</html>